<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="日期">
        <el-date-picker
          v-model="queryParams.patrolTime"
          size="small"
          style="width: 140px"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
     <el-form-item label="巡查区域">
        <el-select v-model="queryParams.patrolType">
            <el-option label="宿舍巡查" value="1"></el-option>
            <el-option label="入校/早操巡查" value="2"></el-option>
            <el-option label="课堂巡查" value="3"></el-option>
            <el-option label="午休巡查" value="4"></el-option>
            <el-option label="晚自习巡查" value="5"></el-option>
            <el-option label="课间巡查" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>


    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="exportPatrol"
          >导出巡查记录</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="AttenceStaList"  id="table">
      <el-table-column label="日期" align="center" prop="patrolTime" :show-overflow-tooltip="true" />
      <el-table-column label="违纪学生" align="center" width="100" prop="studentName" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <label v-if="scope.row.patrolType!=3 && scope.row.patrolType!=4">{{scope.row.studentName}}</label>
              <label v-if="scope.row.patrolType==3 || scope.row.patrolType==4">全班</label>
          </template>
      </el-table-column>
      <el-table-column label="班级/宿舍" align="center" prop="className" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
            <label v-if="scope.row.patrolType!=1 ">班级：{{scope.row.className}}</label>
            <label v-else style="color:blue">宿舍：{{scope.row.dormitoryNo}}</label>
        </template>
      </el-table-column>
      <el-table-column label="巡查区域" align="center" prop="patrolType" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <el-tag v-if="scope.row.patrolType==1">宿舍巡查</el-tag>
              <el-tag v-if="scope.row.patrolType==2">入校/早操巡查</el-tag>
              <el-tag v-if="scope.row.patrolType==3">课堂巡查</el-tag>
              <el-tag v-if="scope.row.patrolType==4">午休巡查</el-tag>
              <el-tag v-if="scope.row.patrolType==5">晚自习巡查</el-tag>
              <el-tag v-if="scope.row.patrolType==6">课间巡查</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="违纪类型/巡查状态" align="center" prop="dvType" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <div v-if="scope.row.patrolType==1 || scope.row.patrolType==4">
                  <label v-if="scope.row.patrolStatus==1" style="color:blue">优秀</label>
                  <label v-if="scope.row.patrolStatus==2" style="color:#ffb100">良好</label>
                  <label v-if="scope.row.patrolStatus==3" style="color:red">差</label>
              </div>
              <div v-else-if="scope.row.patrolType==5">
                  <label v-if="scope.row.patrolType==5">{{getClassPatrolJson(scope.row.classPatrolJson)}} </label>
              </div>
              <div v-else>
                  <label v-if="scope.row.patrolType!=3">{{getDvType(scope.row)}} </label>
                  <label v-if="scope.row.patrolType==3">{{getClassPatrolJson(scope.row.classPatrolJson)}} </label>
              </div>
          </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="describeTxt" :show-overflow-tooltip="true" />
      <el-table-column label="违纪登记人" align="center" prop="createBy" :show-overflow-tooltip="true" />
      <el-table-column label="通知责任人" align="center" prop="isInformCharge" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.isInformCharge==0">未通知</el-tag>
          <el-tag type="success" v-if="scope.row.isInformCharge==1">已通知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="巡查图片" align="center" prop="patrolImg" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-image 
            v-if="scope.row.patrolImg"
            style="width: 50px; height: 40px"
            :src="getImgPath(scope.row.patrolImg)"
            :preview-src-list="[getImgPath(scope.row.patrolImg)]">
          </el-image>
        </template>
      </el-table-column>

    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      @pagination="getList"
    />


    <!-- <bargraph :id="'bargraph'" :data="option2" style="height:350px;margin-top: 30px;"  ></bargraph> -->


  </div>
</template>



<script>
  // import bargraph from '../../dashboard/AttendanceChart'
import { getPageList } from "@/api/school/patrol";
import {saveAs} from '../../../../node_modules/file-saver'
import {utils, write} from '../../../../node_modules/xlsx'
  export default {
    name: "dvinfo",
    data(){
      return{
        serviceEnvPath:process.env.VUE_APP_BASE_API,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        AttenceStaList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          accessDate: undefined
        },
        dvAreaList:[
            {"1":"班级"},
            {"2":"宿舍"},
            {"3":"校园内"}
        ],
        dvtypeList:[
            {"7":"迟到"},
            {"8":"未戴校牌"},
            {"9":"未穿校服"},
            {"6":"其他"},
            {"11":"校园抽烟"},
            {"12":"打架斗殴"},
            {"13":"打架斗殴"},
            {"10":"携带外卖"},
            {"14":"打牌赌博"},
            {"15":"翻爬围墙"},
            {"16":"谩骂他人"},
            {"11":"携带违禁品"}
        ]
        
      }
    },
    components:{
      // bargraph
    },
    created() {
      this.getList();
    },
    methods: {
        getArea(row){
            const val = row.dvArea;
            for(let i=0;i<this.dvAreaList.length;i++){
                for(var key in this.dvAreaList[i]){
                    if(key==val){
                        return this.dvAreaList[i][key]
                    }
                }
            }
            
        },
        getDvType(row){
            const val = row.dvType;
            for(let i=0;i<this.dvtypeList.length;i++){
                for(var key in this.dvtypeList[i]){
                    if(key==val){
                        return this.dvtypeList[i][key]
                    }
                }
            }
        },
      /** 查询任务量列表 */
      getList() {
        this.loading = true;
        getPageList(this.queryParams).then(response => {
            console.log(response.data.list);
            this.AttenceStaList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
         
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getImgPath(filename){
        let path = window.location.host
        if(path.indexOf("49")>=0){
          path = 'http://49.4.65.194:9092/app/common/downloadFileImg?filename='+filename
        } else if(path.indexOf("117")>=0){
          path = 'http://117.78.19.207:9091/app/common/downloadFileImg?filename='+filename
        } else{
          path = 'http://localhost:9091/app/common/downloadFileImg?filename='+filename
        }
        console.log(path)
        return path
      },
      getClassPatrolJson(jsonStr){
          let json = JSON.parse(jsonStr)
          let str = "";
          if(json.sleep != undefined){
              str += "睡觉:" + json.sleep + "人;"
          }
          if(json.phone != undefined){
              str += "玩手机:" + json.phone + "人;"
          }
          if(json.films != undefined){
              str += "看视频:" + json.films + "人;"
          }
          if(json.game != undefined){
              str += "玩游戏:" + json.game + "人;"
          }
          if(json.horseplay != undefined){
              str += "打闹:" + json.horseplay + "人;"
          }
          if(json.classStuNum != undefined){
              str += "教室总人数:" + json.classStuNum + "人;"
          }
          if(json.noSleep != undefined){
              str += "教室总人数:" + json.noSleep + "人;"
          }
          if(json.actArriveNum != undefined){
              str += "实到人数:" + json.actArriveNum + "人;"
          }
        return str
      },
      exportPatrol(){
            debugger
            console.log(utils)
            let tables = document.getElementById("table");
            let table_book = utils.table_to_book(tables);
            var table_write = write(table_book, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                saveAs(
                new Blob([table_write], { type: "application/octet-stream" }),
                "巡查记录.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
      }
    }
  }
</script>
